<template>
    <div class="mine-container">
        <myNavbar title="新增会员"></myNavbar>
        <div class="addressEdit-list">
            <div class="addressEdit-list-item bb">
                <text class="addressEdit-label">会员名称</text>
                <input class="addressEdit-list-item-input" placeholder="会员名称" :value="member.name"
                       v-model="member.name"/>
            </div>
            <div class="addressEdit-list-item bb">
                <text class="addressEdit-label">注册手机</text>
                <input class="addressEdit-list-item-input" placeholder="注册手机号码" type="tel" :value="member.mobile"
                       v-model="member.mobile"/>
            </div>
            <div class="addressEdit-list-item bb">
                <text class="addressEdit-label">收货人名</text>
                <input class="addressEdit-list-item-input" placeholder="收货人名称" :value="consignee" v-model="consignee"/>
            </div>
            <div class="addressEdit-list-item bb detail" @click="toSelectArea">
                <text class="addressEdit-label">所在地区</text>
                <div class="addressEdit_box">
                    <text :class="[building==''?'addressEdit-textareaTwo':'addressEdit-textareaActive']">{{ building == '' ? '点击选择地址' : building }}</text>
                </div>
                <text class="title2">&#xe61f;</text>
            </div>
            <div class="addressEdit-list-item detail">
                <textarea class="addressEdit-textarea" placeholder="请输入门牌号、小区、楼栋号、单元等" :value="roomNumber"
                          v-model="roomNumber"></textarea>
            </div>
        </div>
        <button class="btn addressEdit-list-submit" @click="submit" :text="submitTitle" :loading="submitLoad"></button>
    </div>
</template>
<script>
    const eeui = app.requireModule('eeui');
    const storage = weex.requireModule('storage')
    import {save, update, del} from '../../../api/member';

    // import WSwitch from "../../../components/WSwitch";
    import myNavbar from '../../../components/myNavbar/myNavbar.vue';

    export default {
        name: 'addMember',
        components: {myNavbar},
        data() {
            return {
                member: {
                    areaId: '',
                    areaName: '',
                    mobile: '',
                    name: ''
                },
                title: '',
                type: '',
                id: '',
                consignee: '',
                lat: '',
                lng: '',
                mobile: '',
                name: '',
                building: '',
                areaName: '',
                address: '',
                addressDetail: '',
                roomNumber: '',
                submitLoad:false,
                submitTitle:'确认保存'
            };
        },
        created() {
            // 在实例创建完成后被立即调用
            let _this = this;
            this.initIconFont();
            let params = app.config.params;
            // const eventChannel = this.getOpenerEventChannel()
            // eventChannel.on('sendAddressDetail', function (data) {
            if (params.type == 'add') {
                this.type = params.type;
                this.title = '添加会员住址';
            } else if (params.type == 'edit') {
                this.title = '编辑会员住址';
                this.type = params.type;
                this.id = params.data.id;
                this.mobile = params.data.mobile;
                this.name = params.data.name;
                this.building = params.data.building;
                this.areaName = params.data.areaName;
                this.address = params.data.address;
                this.roomNumber = params.data.roomNumber;
            }
            // })
        },

        mounted() {
            let _this = this;
        },

        methods: {
            //跳转到区域选择页面
            toSelectArea() {
                eeui.openPage(
                    {
                        pageName: 'selectArea',
                        url: 'root://pages/selectArea/selectArea.js',
                        statusBarType: 'immersion'
                    },
                    res => {
                        if (res.status == 'destroy' && res.pageName == 'selectArea') {
                            let variable = eeui.getCaches('address');
                            if (!this.isNull(variable)) {
                                let latLng = variable.location.split(',')
                                this.lng = latLng[0]
                                this.lat = latLng[1]
                                this.building = variable.address + '(' + variable.name + ')';
                                this.member.areaId = variable.adCode;
                                this.member.areaName = variable.adName;
                                eeui.setCaches('address', '');
                            }
                        }
                    }
                );
            },

            //表单提交事件
            submit() {
                var _this = this
                if (this.isNull(this.member.name)) {
                    eeui.toast({
                        message: '会员名称不能为空'
                    });
                } else if (this.isNull(this.member.mobile)) {
                    eeui.toast({
                        message: '会员号码不能为空'
                    });
                } else if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.member.mobile)) {
                    eeui.toast({
                        message: '会员号码输入有误'
                    });
                } else if (this.isNull(this.consignee)) {
                    eeui.toast({
                        message: '请输入收货人名称'
                    });
                } else if (this.isNull(this.building)) {
                    eeui.toast({
                        message: '请点选会员住址'
                    });
                } else if (this.isNull(this.roomNumber)) {
                    eeui.toast({
                        message: '小区、门牌号信息不能为空'
                    });
                } else {
                    let params = {
                        address: this.building + ' ' + this.roomNumber,
                        building: this.building,
                        consignee: this.consignee,
                        level: 0,
                        roomNumber: this.roomNumber,
                        isDefault: true,
                        lat: this.lat,
                        lng: this.lng,
                        phone: this.member.mobile
                    }
                    let member = {
                        areaId: this.member.areaId,
                        areaName: this.member.areaName,
                        mobile: this.member.mobile,
                        name: this.member.name
                    }
                    if (this.type == 'add') {
                        _this.submitLoad = true
                        _this.submitTitle = '加载中'
                        console.log(_this.submitLoad)
                        save(params, member).then((res) => {
                            _this.submitLoad = false
                            _this.submitTitle = '确认保存'
                            storage.setItem('addMember', 'add')
                            eeui.closePage()
                        }).catch((err) => {
                            _this.submitLoad = false
                            _this.submitTitle = '确认保存'
                        });
                    } else if (this.type == 'edit') {
                        data.id = this.id;
                        _this.submitLoad = true
                        _this.submitTitle = '加载中'
                        console.log(_this.submitLoad)
                        update(data).then(res => {
                            if (res.type == 'success') {
                                eeui.closePage({pageName: 'addMember'});
                            }
                            _this.submitLoad = false
                            _this.submitTitle = '确认保存'
                        }).catch(error => {
                            _this.submitLoad = false
                            _this.submitTitle = '确认保存'
                        });
                    }
                }
            },
        }
    };
</script>

<style scoped>
    @import url('../../../style/wx.css');

    .mine-container {
        flex: 1;
        background-color: rgba(248, 248, 248, 0.8);
    }

    .navbar {
        width: 750px;
        height: 100px;
        margin-bottom: 20px;
    }

    .title2 {
        color: gray;
        font-size: 36px;
        font-family: iconfont2;
        color: #cccccc;
    }

    .addressEdit-list {
        margin: 20px 20px 0;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        padding: 0 20px;
    }

    .addressEdit-list-item {
        flex-direction: row;
        align-items: center;
        height: 102px;
        font-size: 28px;
        font-family: PingFangSC;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        display: flex;
        position: relative;
    }

    .area {
        justify-content: space-between;
    }

    .addressEdit-list-item-input {
        width: 480px;
        height: 50px;
    }

    .bb {
        border-bottom-style: solid;
                border-bottom-width: 2px;
                border-bottom-color: rgba(128, 128, 128, 0.062);
    }

    .addressEdit-list-icon {
        position: absolute;
        right: 0px;
    }

    .addressEdit-label {
        padding-right: 30px;
        font-size: 30px;
    }

    .detail {
        height: 120px;
        align-items: center;
    }

    .addressEdit-textarea{
        font-size: 30px;
        flex: 1;
        line-height: 40px;
        lines: 2;
        text-overflow: ellipsis;
        font-family: PingFang SC;
        font-weight: 400;
        max-height: 80px;
        color: rgba(135, 135, 135, 0.822);
    }

    .addressEdit-textareaTwo{
        font-size: 30px;
        color: rgba(135, 135, 135, 0.822);
    }

    .addressEdit-textareaActive {
        color: #000;
        font-size: 30px;
    }

    .addressEdit-detail{
        font-size: 30px;
        text-overflow: ellipsis;
        font-weight: 400;
        color: rgba(135, 135, 135, 0.822);
        background-color: red;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 600px;
    }

    .addressEdit-detailActive {
        flex: 1;
        color: #000;
    }

    .addressEdit-list-defalut {
        font-size: 24px;
    }

    .grey {
        color: #838383;
    }

    .addressEdit-list-submit-btn {
        font-size: 32px;
        letter-spacing: 5px;
        color: white;
    }

    .addressEdit-list-submit {
        align-items: center;
        justify-content: center;
        margin: 20px 20px 0;
        width: 710px;
        display: block;
        height: 82px;
        background-color: #409EFF;
        border-radius: 16px;
        font-size: 32px;
        color: white;
    }


    .addressEdit-list-submit-del {
        align-items: center;
        justify-content: center;
        margin: 20px 20px 0;
        display: block;
        width: 710px;
        height: 82px;
        background-color: rgb(200, 200, 200);
        border-radius: 16px;
        color: red;
    }


    .switch {
        width: 120px;
        height: 60px;
    }

    .addressEdit_box{
        flex: 1;
        lines:2;
        text-overflow: ellipsis;
    }
    .loadingImg{
        width: 30px;
        height: 30px;
    }
    .button {
        font-size: 24px;
        margin-left: 37.5px;
        margin-right: 37.5px;
        margin-bottom: 20px;
        width: 300px;
        height: 80px;
    }
</style>
